<template xmlns="http://www.w3.org/1999/html" xmlns:>
    <div class='router-div'>
      <form >
        <div v-for="conProp in configTable.props">
          <!-- 文本类型-->
          <p v-if="conProp.type=='text'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="text" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
          </p>

          <!-- 整数类型-->
          <p v-if="conProp.type=='int'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="number" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
          </p>

          <!-- 图片类型-->
          <!--v-bind="{action:domain + '/file/upload'}"-->
          <p v-if="conProp.type=='img'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="text" :ref="conProp.prop" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
            <el-upload
              class="upload-img"
              ref="upload"
              :action="imgUploadUrl"
              list-type="picture"
              :show-file-list="true"
              :auto-upload="true"
              :limit="3"
              :on-success="uploadSuccess"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :data="{propName:conProp.prop}">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </p>

           <!--日期类型-->
          <p v-if="conProp.type=='date'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="date" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
          </p>

           <!--日期时间类型-->
          <p v-if="conProp.type=='datetime'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="datetime-local" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
          </p>

           <!--选择类型-->
          <p v-if="conProp.type=='select'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="button" @click="selectProp(conProp)" class="inputItem" :name="conProp.prop"/><br>
          </p>
        </div>
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>

      <el-dialog width="90%" title="选择条目" :visible.sync="dialogSelectVisible">
        <select-prop :conProp="currSelectConProp"  v-on:onSelectedProp="onSelectedProp" v-on:dialogClose="dialogSelectVisible = false"></select-prop>
      </el-dialog>
    </div>
</template>

<script>
  import {onSelectedProp, event} from "../../data/bus";
  import {Toast} from "mint-ui"
  import common from "../../data/common"
  import {formatDate} from "../../data/DateUtil"
  import SelectProp from "../../components/sub/SelectProp"

  event.$on(onSelectedProp, function (name, value) {
    var elements = document.getElementsByName(name);
    for (var i=0; i<elements.length; i++) {
      elements[i].value = value;
    }
  });
    export default {
        name: "add-item",
      props:[
        "configTable",
      ],
      data(){return{
        domain:common.apidomain,
        imgUploadUrl:common.apidomain + "/file/upload",
        fileList:[],
        transferData:[],

        editDialogTitle:"编辑",
        isCopyMode:false,
        dialogSelectVisible: false,
        currSelectConProp:"",
      }},
      components:{
        SelectProp
      },
      methods:{
        /**
         * 打开选择属性对话框
         * @param conProp
         */
        selectProp(conProp) {
          console.log("Right rev selectProp")
          this.dialogSelectVisible = true;
          this.currSelectConProp = null;
          this.currSelectConProp = conProp;
        },
        /**
         * 选择属性对话框,返回调用函数
         * @param prop
         * @param value
         */
        onSelectedProp(prop, value) {
          console.log(prop + "," + value)
          this.dialogSelectVisible = false;
          // this.currEditItem[prop] = value;
          // var newitem = {};
          // for (var attr in this.currEditItem) {
          //   newitem[attr] = this.currEditItem[attr];
          // }
          // this.currEditItem = newitem;
        },

        uploadSuccess(response, file, fileList) {
            var propName = response.data.propName;
            var viewArray = this.$refs[propName];
            var view = viewArray[0];
            var value = response.data.fileName;

          view.value = value;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },

        onSubmit(){
          var url = common.apidomain + "/admin/insert";
          console.log(url)
          var form = {"tableName":this.configTable.tableName};
          for (var i=0; i<this.configTable.props.length; i++) {
            var prop = this.configTable.props[i];
            // 自动填写不需要用户输入
            if (prop.type == "auto") {
              continue;
            }

            var value = null;

            if (prop.type == "transfer") {
              // 从上次页面传值
              for (var j=0; j<this.transferData.length; j++) {
                console.log(prop.prop + "," + this.transferData[j].name);
                 if (prop.prop == this.transferData[j].name) {
                   value = this.transferData[j].value;
                 }
              }
            } else {
              // 从页面输入
              var elements = document.getElementsByName(prop.prop);
              for (var j=0; j<elements.length; j++) {
                var el = elements[j];
                console.log(el.name + "," + el.value);
                // 程序会有多个不显示的隐藏元素, 剔除没有值的元素.
                if (el.value != null && el.value != "") {
                  value=el.value;
                  break;
                }
              }
            }

            if (value == null) {
              // this.$message(prop.prop + "不能为空")
              // return;
            } else {
              form[prop.prop] = value;
            }
          }

          this.$http.post(url,form, {emulateJSON:true}).then(ret=>{
            if (ret.body.code == "0") {
              Toast("提交成功");
              this.$emit("dialogClose",false);
              this.clearView();
              this.$router.go(-1)
            } else {
              this.$message(ret.body.msg);
            }

          }, ret=>{
            this.$message(ret.body.msg);
          });

        },
        onCancel() {
          console.log("add cancel");
          this.$emit("dialogClose","");
          this.clearView();
          this.$router.go(-1)
        },
        clearView() {
          var elements = document.getElementsByClassName("inputItem");
          for (var i=0; i<elements.length; i++) {
            elements[i].value=null;
          }

          var imgs = document.getElementsByClassName("upload-img");
          for (var i=0; i<imgs.length; i++) {
            var view = imgs[i];
            view.clearFiles();
          }
        }
      },
      mounted() {
      },
      created() {
          this.configTable = this.$route.query.config
          this.transferData = this.$route.query.transferData;
      }
    }
</script>

<style scoped>

  form {
  }
  p {
    margin: 5px;
    left: 0px;

  }
  input {
    width: 80%;
    height: 20px;
  }
</style>
